<template>
    <div class="loop-output">
        <h1>循环输出</h1>
        <div class="box">
            <div v-for="item in echartsData.value" :key="item.id" ref="refList" class="echart"></div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts';
onMounted(() => {
    loadData()
})
const refList = ref([])
const echartsData = reactive({ value: [] })
// 模拟加载后端数据
const loadData = () => {
    echartsData.value = [
        {
            id: '1',
            value: 30,
            name: '藤原拓海'
        },
        {
            id: '2',
            value: 60,
            name: '高桥凉介'
        },
        {
            id: '3',
            value: 90,
            name: '奔驰上树'
        }
    ]
    // 需要等页面再次更新完，不然拿不到dom
    nextTick(() => {
        echartsData.value.forEach((e, i) => {
            initEcharts(e, refList.value[i])
        })
    })
}
const initEcharts = (data, echartRef) => {
    // 基于准备好的dom，初始化echarts实例
    const chart = echarts.init(echartRef);
    let option = {
        tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
            {
                name: '速度',
                type: 'gauge',
                detail: {
                    formatter: '{value}'
                },
                data: [data]
            }
        ]
    };
    // 绘制图表
    chart.setOption(option);
}
</script>
<style lang="scss" scoped>
.loop-output {
    margin: auto;
    max-width: 60vw;
    overflow: hidden;

    .box {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .echart {
        width: 50%;
        height: 280px;
    }
}
</style>
  
  